<template>
	<view class="create-order">
		<!-- 地址区域 -->
		<view class="address-view" @click="goAddress">
			<!-- 正常信息 -->
			<template v-if="address.addressId">
				<!-- 姓名/手机号信息 -->
				<view class="name">
					<text>{{ address.userName }}</text>
					<text>{{ address.userPhone }}</text>
				</view>
				<!-- 地址信息 -->
				<view class="address">{{ addressInfo }}</view>
			</template>
		
			<!-- 空信息 -->
			<view class="empty" v-else >
				<van-icon class="warning" name="warning" />
				<text>请选择收货地址</text>
			</view>
			<!-- 右箭头图标 -->
			<van-icon class="arrow" name="arrow" />
		</view>
		
		<!-- 商品列表区域 -->
		<view class="goods-list">
			<view class="goods-item" v-for="item in goodsList" :key="item.cartItemId">
				<view class="goods-img"><image :src="item.goodsCoverImg" mode=""></image></view>
				<view class="goods-desc">
					<view class="goods-title">
						<text>{{ item.goodsName }}</text>
						<text>x{{ item.goodsCount }}</text>
					</view>
					<view class="goods-btn">
						<view class="price">￥{{ item.sellingPrice }}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 提交区域 -->
		<view class="order-view">
			<view class="price">
			    <text>商品金额</text>
			    <text>￥{{ totalPrice }}</text>
			</view>
			<van-button class="pay-btn" color="#1baeae" type="primary" block @click="createOrder">生成订单</van-button>
		</view>
		
		<!-- 支付弹窗 -->
		<van-popup :show="state.isShow" position="bottom" custom-style="height: 30%;" closeable @close="cancelOrder">
			<view class="pay-view">
				<van-button color="#4fc08d" block @click="handlePayOrder(1)">微信支付</van-button>
				<van-button color="#1989fa" block @click="handlePayOrder(2)">其他支付</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { createOrderApi } from '../../api/modules/shop';
import { ShopStore } from '../../store/shop';
import { computed, reactive, toRefs } from "vue";
import { getAddressDetail, getDefaultAddress } from '../../api/modules/address';
import { createOrder2Api, payOrder } from '../../api/modules/order';
const shopStore = ShopStore()

const state = reactive({ goodsList: [], address: {}, isShow: false, orderNo: '' })

// 订单总金额
const totalPrice = computed(() => state.goodsList.reduce((sum, item) => sum + item.sellingPrice * item.goodsCount , 0))

// 详情地址信息
const addressInfo = computed(() => `${state.address.provinceName} ${state.address.cityName} ${state.address.regionName} ${state.address.detailAddress}`)


// 加载数据
const init = async () => {
	// 1. 显示加载状态
	uni.showLoading({ title: '加载中...', mask: true }) 
	// 2. 加载订单信息 [1, 2]  1,2
	const ids = shopStore.checkIds.join(',')
	const { data } = await createOrderApi(ids)
	// 2.1 加载地址信息 【判断是否有地址ID ?  加载对应地址  :  加载默认地址 】
	const { data: data2 } = shopStore.addressId ? await getAddressDetail(shopStore.addressId) : await getDefaultAddress()
	state.goodsList = data
	state.address = data2 || {}
	// 3. 关闭加载状态
	uni.hideLoading()
}

// 跳转地址选择
const goAddress = () => {
	uni.navigateTo({ url: '/subpkg/address/address' })
}

// 生成订单
const createOrder = async () => {
	// 0. 判断是否选择地址
	if (!state.address.addressId) return uni.$Toast('请选择地址')
	// 1. 发起请求 生成订单【订单号】
	const { data } = await createOrder2Api({ addressId: state.address.addressId, cartItemIds: shopStore.checkIds })
	console.log(data)
	state.orderNo = data
	// 2. 显示弹出层
	state.isShow = true
}

// 关闭订单
const cancelOrder = () => {
	// 询问用户是否关闭支付
	uni.showModal({
		title: '提示',
		content: '你确定要取消支付?',
		cancelText: '容我想想',
		confirmText: '狠心拒绝',
		success: ({ confirm }) => {
			// 用户点击了确定！！！
			if (confirm) {
				// 1. 关闭弹出层
				state.isShow = false
				// 2. 替换当前页面 跳转订单页
				setTimeout(() => {
					uni.redirectTo({ url: '/subpkg/order/order' })
				}, 300)
			}
		}
	})
}

// 支付订单
const handlePayOrder = async (type) => {
	uni.showLoading({ title: '支付中...', mask: true })
	try{
		// 1. 发起请求
		await payOrder({ orderNo: state.orderNo, payType: type })
		// 1.1. 关闭弹出层
		state.isShow = false
		// 2. 支付成功
		uni.$Toast('支付成功')
		// 3. 替换当前页面 跳转订单页
		setTimeout(() => {
			uni.redirectTo({ url: '/subpkg/order/order' })
		}, 300)
	}catch(e){
		//TODO handle the exceptionun
		uni.hideLoading()
		console.log('支付失败');
	}
}

// 页面加载
onLoad((message) => {
	
})

// 页面显示
onShow(() => {
	init()
})

const { goodsList, address } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}

// 地区区域
.address-view {
	margin-bottom: 40rpx;
	background-color: #fff;
	position: relative;
	font-size: 28rpx;
	padding: 30rpx;
	color: #222333;
	.empty {
		margin: 40rpx 0;
		font-size: 30rpx;
		.warning {
			margin-right: 20rpx;
		}
	}
	.name,
	.address {
		margin: 20rpx 0;
		text {
			margin-right: 6rpx;
		}
	}
	.arrow {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
	}
	&::before {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 4rpx;
		background-image: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
		background-size: 160rpx;
	}
}

// 商品列表
.goods-list {
	padding-bottom: 230rpx;
	.goods-item {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		.goods-img {
			image {
				@include wd(200rpx);
			}
		}
		.goods-desc {
			@include fj();
			flex-direction: column;
			flex: 1;
			padding: 40rpx;
			.goods-title {
				@include fj();
			}
			.goods-btn {
				@include fj();
				.price {
					font-size: 32rpx;
					color: red;
					line-height: 56rpx;
				}
			}
		}
	}
}

// 提交区域
.order-view {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	padding: 20rpx 0;
	border-top: 2rpx solid #e9e9e9;
	box-sizing: border-box;
	.price {
		@include fj();
		padding: 0 5%;
		margin: 20rpx 0;
		font-size: 28rpx;
		text:nth-child(2) {
			color: red;
			font-size: 36rpx;
		}
	}
	.pay-btn .van-button {
		width: 90%;
		margin: 0 auto;
	}
}


.pay-view {
	width: 90%;
	margin: 0 auto;
	padding-top: 100rpx;
	.van-button {
		margin-bottom: 20rpx;
	}
}
</style>
